<template>
    <div class="page_wrapper">
        <van-tabs v-model:active="active" color="#66d6ff" @change="setup('0')">
            <van-tab title="全部"></van-tab>
            <van-tab title="待发货"></van-tab>
            <van-tab title="待收货"></van-tab>
            <van-tab title="已完成"></van-tab>
        </van-tabs>

        <div class="list">
            <empty v-if="!billList.length"></empty>

            <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="setup()">
                <div class="item" v-for="item in billList" :key="item.BILL_NO">
                    <div class="top">
                        <div class="name">
                            {{ item.COMPONENT_TYPE }}
                        </div>
                        <div class="type">
                            <span v-if="item.BILL_STATUS === 'OPERATION_AUDITING'">审核中</span>
                            <span v-if="item.BILL_STATUS === 'WAIT_PAYMENT'">未支付</span>
                            <span v-if="item.BILL_STATUS === 'AUDITING'">审核中</span>
                            <span v-if="item.BILL_STATUS === 'REJECT'">审核拒绝</span>
                            <span v-if="item.BILL_STATUS === 'INIT'">待发货</span>
                            <span v-if="item.BILL_STATUS === 'IN_TRANSIT'">待收货</span>
                            <span v-if="item.BILL_STATUS === 'SUCCESS'">已完成</span>
                        </div>
                    </div>
                    <div class="top" style="padding: 10px 0">
                        <div class="name" v-if="item.TOTAL_AMOUNT">￥ {{ item.TOTAL_AMOUNT }}</div>
                        <div class="name" v-else>单价：￥{{ item.PRICE }}</div>
                        <div class="type">x {{ item.COUNT }} 台</div>
                    </div>
                    <div class="top" v-if="item.BILL_STATUS === 'IN_TRANSIT'">
                        <div class="name"></div>
                        <div class="type">
                            <van-button size="small" type="primary" @click="submitConfirmReceived(item)">确认收货</van-button>
                        </div>
                    </div>
                    <div class="top" v-if="item.BILL_STATUS === 'WAIT_PAYMENT'">
                        <div class="name"></div>
                        <div class="type">
                            <van-button size="small" type="danger" @click="goPay(item)">前往支付</van-button>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '30%', padding: '20px' }">
            <van-cell title="单元格" is-link>
                <template #title>
                    <div class="payType" @click="onPay('ZFB')">
                        <div class="left">
                            <img src="@/assets/zfb.png" alt="" />
                        </div>
                        <div class="center">支付宝支付</div>
                    </div>
                </template>
            </van-cell>
        </van-popup>
    </div>
</template>
<script setup lang="ts">
import { confirmReceived, posSalesQuery, posStoreOutQuery, toPay } from '@/api/orderPos'
import { showConfirmDialog } from 'vant'
const active = ref(0)
const currentPage = ref(1)
const billStatus = ref('AUDITING')
const billList = ref([])
const finished = ref(false)
const loading = ref(false)
const showBottom = ref(false)
const currentOrder = ref({})
const setup = val => {
    // 只有tab切换置为页数置为1，加载更多不用
    if (val && val == '0') {
        billList.value = []
        currentPage.value = 1
    }
    if (active.value === 0) {
        billStatus.value = ''
        getPosSalesQuery()
    }
    if (active.value === 1) {
        billStatus.value = 'INIT'
        getPosStoreOutQuery()
    }
    if (active.value === 2) {
        billStatus.value = 'IN_TRANSIT'
        getPosStoreOutQuery()
    }
    if (active.value === 3) {
        billStatus.value = 'SUCCESS'
        getPosStoreOutQuery()
    }
}

//  查询订单列表    待付款和线下付款
const submitConfirmReceived = item => {
    showConfirmDialog({
        title: '确认收货',
        message: '确定已收到货物？'
    })
        .then(() => {
            confirmReceived({
                billNo: item.BILL_NO
            }).then(res => {
                setup('0')
            })
        })
        .catch(() => {
            // on cancel
        })
}
const goPay = item => {
    showBottom.value = true
    currentOrder.value = item
}
const onPay = payWay => {
    toPay({
        orderNo: currentOrder.value.BILL_NO,
        payWay
    }).then(res => {
        uni.postMessage({
            data: {
                msg: '终端采购支付宝支付',
                payData: res.object.payData
            }
        })
    })
}
//  查询订单列表    待付款和线下付款
const getPosSalesQuery = () => {
    posSalesQuery({
        currentPage: currentPage.value,
        billStatus: billStatus.value
    }).then(res => {
        if (res.object.list.length < 10) {
            finished.value = true
            loading.value = false
        } else {
            currentPage.value++
            finished.value = false
            loading.value = false
        }

        billList.value = billList.value.concat(res.object.list)
    })
}
//  查询订单列表    待付款和线下付款
const getPosStoreOutQuery = () => {
    posStoreOutQuery({
        currentPage: currentPage.value,
        billStatus: billStatus.value
    }).then(res => {
        if (res.object.list.length < 10) {
            finished.value = true
            loading.value = false
        } else {
            currentPage.value++
            finished.value = false
            loading.value = false
        }

        billList.value = billList.value.concat(res.object.list)
    })
}
</script>

<style scoped lang="scss">
.list {
    padding: 10px;
    .item {
        background: #ffffff;
        margin-bottom: 10px;
        opacity: 1;
        border-radius: 10px;
        padding: 20px;
        .top {
            display: flex;
            justify-content: space-between;
            line-height: 20px;
            .name {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #545454;
            }
            .type {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #d50000;
            }
        }
    }
}
::v-deep .van-cell {
    background-color: #f5f5f5;
}
.payType {
    display: flex;
    .left {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
